<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="/css/styles.css">
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div class="container">
    <h1>学生管理系统</h1>
    <div class="search-add-section">
        <input type="text" id="search-box" placeholder="搜索学生姓名...按回车开始搜索">
        <button id="add-book-btn">添加学生</button>
    </div>
    <table id="book-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 图书列表将动态填充 -->
        </tbody>
    </table>
    <div id="book-form-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="close-form-btn">&times;</span>
            <h2 id="form-title">添加学生</h2>
            <form id="book-form">
                <input type="hidden" id="book-id">
                <label for="book-name">姓名:</label>
                <input type="text" id="book-name" required>
                <label for="author">性别:</label>
                <input type="text" id="author" required>
                <label for="publisher">年龄:</label>
                <input type="text" id="publisher" required>
                <button type="submit">保存</button>
            </form>
        </div>
    </div>
</div>
<script src="/js/book.js"></script>
</body>
</html>